import React from 'react';

const TagFilter = ({ tags, selectedTag, onTagChange }) => {
  return (
    <div className="mb-6">
      <h3 className="text-lg font-medium mb-2">按标签筛选</h3>
      <div className="flex flex-wrap gap-2 transition-all duration-300">
        <button
          onClick={() => onTagChange('all')}
          className={`px-3 py-1 rounded-full text-sm transition-all duration-300 transform hover:scale-105 icon-scale-hover ${selectedTag === 'all' ? 'bg-blue-500 text-white shadow-md' : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600'}`}
        >
          全部
        </button>
        {tags.map(tag => (
          <button
            key={tag}
            onClick={() => onTagChange(tag)}
            className={`px-3 py-1 rounded-full text-sm transition-all duration-300 transform hover:scale-105 icon-scale-hover ${selectedTag === tag ? 'bg-blue-500 text-white shadow-md' : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600'}`}
          >
            {tag}
          </button>
        ))}
      </div>
    </div>
  );
};

export default TagFilter;